<style lang="less">
@import '../../../styles/common.less';
</style>
<template>
  <Card style="height:900px">
    <Layout>
      <Card>
        <header>
          <span style="vertical-align:middle">申请书编号:</span>
          <Input v-model="loanId" style="width:150px" />

          <span style="vertical-align:middle;margin-left: 10px;">客户姓名:</span>
          <Input v-model="custName" style="width:150px" />

          <span style="vertical-align:middle;margin-left: 10px;">身份证:</span>
          <Input v-model="custCardNo" style="width:150px" />

          <span style="width: 200px;margin-left: 20px;">退件时间(起):</span>
          <DatePicker v-model="backPieceBeginDate" type="date" style="width: 150px"></DatePicker>
          <span style="width: 200px;margin-left: 5px;">-</span>
          <span style="width: 200px;margin-left: 5px;">退件时间(止):</span>
          <DatePicker v-model="backPieceEndDate" type="date" placement="bottom-end"  style="width: 150px"></DatePicker>

          <Button type="primary" @click="query" style="margin-left: 10px;">查询</Button>
        </header>

      </Card>
      <Card>
        <Table border :columns="orderColumns" :data="data1" style="width: 100%;"></Table>
        <div style="margin-top: 36px;text-align: center;">
          <Page :total="totalNum" :current="currentPage" :page-size="pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
        </div>
      </Card>
    </Layout>
  </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      loanId: '',
      custName: '',
      custCardNo: '',
      backPieceBeginDate: null,
      backPieceEndDate: null,
      totalNum: 0,
      currentPage: 1,
      pageSize: 10,
      amountAct: 0,
      orderColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 50,
          className: 'tbake'
        },
        /* {
          title: '客户姓名',
          key: 'custName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        */
        {
          title: '客户姓名',
          key: 'custName',
          render: (h, params) => {
            const vm = this
            return h('div', {
              on: {
                click () {
                  // var vm = this
                  // var orderId= params.row.loanId
                  // vm.startInitSelectData(orderId)
                  vm.$router.push({
                    name: 'capital-fund-task-detail',
                    query: {
                      loanId: params.row.loanId,
                      type: 1,
                      collapseCotrol: false
                    }
                  })
                }

              },

              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              }
            }, params.row.custName)
            // debugger
          }
        },

        {
          title: '身份证',
          key: 'custCardNo',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '申请书编号',
          key: 'loanId',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '车牌号',
          key: 'plateNo',
          width: 150,
          className: 'tbake',
          align: 'center'
        },

        {
          title: '退件时间',
          key: 'backPieceDate',
          align: 'center',
          width: 150,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.backPieceDate))
            ])
          }
        },
        {
          title: '附件上传阶段',
          key: 'uploadPhase',
          align: 'center',
          width: 150,
          className: 'tbake',
          render: (h, params) => {
            return h('div', [
              params.row.uploadPhase === '1' && h('span', '补件'),
              params.row.uploadPhase === '2' && h('span', '上传保单')
            ])
          }
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 80,
          className: 'tbake',
          render: (h, params) => {
            return h('div', [
              params.row.status === 'D0' && h('span', '未补件'),
              params.row.status === 'D1' && h('span', '已补件')
            ])
          }
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              params.row.status === 'D0' &&
              h(
                'Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      var dto = vm.data1[params.index]
                      vm.submitEstateRowData(dto)
                    }
                  }
                }, '提交'
              )
            ])
          }
        }
      ],
      data1: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.currentPage = pageNum
      vm.queryDetail()
    },

    //  startInitSelectData (loanId) {
    //   var vm = this
    //   // 查询
    //   // var loanId = this.$route.query.loanId
    //   this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/process/task_process/service/getSdxdUploadAttamentTypes', loanId).then(re => {
    //     var data = re.data
    //     var code = data.code
    //     var message = data.message
    //     if (code !== 'success') {
    //       this.$Message.warning(message)
    //       return
    //     }
    //     var attachmentDatas = data.data || []
    //     attachmentDatas.forEach(item => {
    //       var tData = {}
    //       tData.label = item.atmtTypeName
    //       tData.value = item.atmtType
    //       // debugger;
    //       vm.attachMents.push(tData)
    //     })
    //   }).catch(er => {

    //   })
    // },

    sizeChange: function (pageLength) {
      var vm = this
      vm.pageSize = pageLength
      vm.queryDetail()
    },
    query () {
      var vm = this
      if (vm.backPieceBeginDate > vm.backPieceEndDate && vm.backPieceEndDate !== '') {
        this.$Message.warning('开始日期不能大于结束日期')
        return
      }
      this.queryDetail()
    },

    // 提交上传附件信息到资金方
    submitEstateRowData (dto) {
      var vm = this
      debugger
      var config = {
        title: '提交确认',
        content: '将发送文件给资金方，请确认已经上传影像文件?',
        onOk: function () {
          // var formData = params.row
          vm.$ajax
            .post(
              this.$appContext.marvels_core_financial +
            'financial/sdxdFund/backPieceSupplement/service/submitCapitalFundBackPieceDetail',
              {
                custName: dto.custName,
                custCardNo: dto.custCardNo,
                loanId: dto.loanId

              }
            )
            .then(re => {
              if (re.data.code === 'success') {
                this.$Message.success(re.data.data)
              } else {
                this.$Message.warning(re.data.data)
              }
              debugger
              vm.queryDetailSencond()
            })
            .catch(er => { })
        }
      }
      this.$Modal.confirm(config)
    },

    // 初始化页面时查询所有数据
    queryDetail () {
      var vm = this
      this.$ajax
        .post(
          this.$appContext.marvels_core_financial +
          'financial/sdxdFund/backPieceSupplement/service/queryCapitalFundBackPieceDetail',
          {
            loanId: vm.loanId,
            startDate: vm.backPieceBeginDate,
            endDate: vm.backPieceEndDate,
            custName: vm.custName,
            custCardNo: vm.custCardNo,
            currentPage: vm.currentPage,
            pageSize: vm.pageSize
          }
        )
        .then(re => {
          this.data1 = re.data.data
          this.totalNum = re.data.data.length
          // debugger
        })
        .catch(er => { })
    },

    queryDetailSencond () {
      var vm = this
      this.$ajax
        .post(
          this.$appContext.marvels_core_financial +
          'financial/sdxdFund/backPieceSupplement/service/queryCapitalFundBackPieceDetailSecond',
          {
            loanId: vm.loanId,
            startDate: vm.backPieceBeginDate,
            endDate: vm.backPieceEndDate,
            custName: vm.custName,
            custCardNo: vm.custCardNo,
            currentPage: vm.currentPage,
            pageSize: vm.pageSize
          }
        )
        .then(re => {
          this.data1 = re.data.data
          this.totalNum = re.data.data.length
          // debugger
        })
        .catch(er => { })
    }
  },

  created () {
    this.$ajax = this.$util.ajax()
    // var vm = this
    // var tmpDate = new Date()
    // var tmpEndDate = new Date()
    // tmpEndDate.setDate(tmpEndDate.getDate() )
    // vm.backPieceEndDate = tmpEndDate
    // tmpDate.setMonth(tmpDate.getMonth() - 3)
    // vm.backPieceBeginDate = tmpDate
    this.queryDetail()
  }
}
</script>
<style lang="less">
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
</style>
